<template>
<div class="app-page">
  <div class="topbanner">
    <img class="simg" :src="prizeImgUrl" />
    <a :href="viewQuanUrl" class="toQuan" ca="fl_v170522_mycoupon_click$立即查看奖品按钮点击量"></a>
    <a href="javascript:;" @click="wxShare" ca="fl_v170522_showoffshare_click$炫耀按钮点击量" class="shareBtn"></a>
  </div>
  <div class="quanSucTips">
    <img src="../../../assets/image/dineAndDash/successTips.png" class="sucImg" />
    <div class="quanWrap">
      <div class="simgTop"></div>
      <div class="quan-wrap">
        <div class="quan-wrapBg">
          <ul class="quanListWrap">
            <li  v-for="item in listQuan">
              <div class="quanList-l">

                <p class="quan-status" v-if="item.status!='1'">限购1张</p>
                <p class="quan-status gray" v-else>已下单</p>
                <div class="quanData" v-html="item.Des">
                </div>
                <div class="price-tips" v-html="item.priceTips"></div>
              </div>
              <div class="quanList-r" :class="{gray:item.status=='1'}">

                <a href="javascript:;" @click="getOrderUrl(buyUrl, item.code)" :ca="item.skuCode | addString">

                  <span class="sprice">¥0.88</span>
                  <h4 class="toOrder">立即抢购</h4>
                </a>
              </div>
            </li>

          </ul>
        </div>
      </div>
      <div class="simgBottom"></div>
    </div>
  </div>
  <a href="javascript:;" @click="popRules" class="activeInfo">活动规则</a>
  <div class="downloadApp" v-show="opentype!=6">
    <a :href="downloadUrl" class="toApp" ca="fl_v170522_downloadapp1_click$下载APP按钮点击量">立即前往</a>
  </div>
  <div class="shareGuide" v-show="isShare" @click="hideShare"></div>
  <div class="ruleWrap" v-if="isShowRule">
    <div class="shadow"></div>
    <div class="ruleMain">
      <span @click="popRules" class="rule-close"></span>
      <h3>活动规则</h3>
      <div class="rule-content">
           <h4> 1. 活动时间持续多久？</h4>
           <p>即日起至2017年7月30日23:59:59；</p>
           <h4> 2. 如何参加抽奖？ </h4>
            <p>活动期间，每个车享账号可享一次抽奖机会。每天首次成功分享可另得一次抽奖机会；</p>
            <h4>3. 抽中的霸王餐如何使用？</h4>
            <p>① 活动期间，抽中的霸王餐体验券可在车享家APP-我的-优惠券内进行查看；</p>
            <p>② 在车享家APP中选择相应服务下单后选择霸王餐体验券即可使用；</p>
            <p>③ 所有霸王餐请在有效期内到店完成服务，券过期则作废；</p>
            <p>④ 参与霸王餐活动的用户，需在《汽车之家》论坛发布体验帖，高质量帖有机会获得500元车享金（图文并茂）；</p>
            <p>汽车之家论坛完成发帖后，用户将帖子链接发送至车享体验官邮箱：tiyanguan@chexiang.com</p>
            <p>邮件发送内容含：帖子链接+体验服务门店+用户姓名及联系方式</p>
            <h4>4. 购买的霸王券如何使用？ </h4>
          <p> ① 每个车享账户每种券限购一张0.88元的霸王券，如下单成功但未在指定时间内（2个小时）完成支付，则无法再次进行购买，霸王券不可进行退款；<a class="toLink" :href="orderListUrl">点击查看我的购买记录</a></p>
           <p> ② 购买霸王券后将推送短信至车享账户关联手机，用户持短信到店进行服务兑换；</p>
           <p> ③ 为了更好为您提供服务，建议可提前至少1天致电门店进行预约，具体门店信息可下载车享家APP进行查看；</p>
           <p> ④ 所有霸王券请于有效期内到店兑换，券过期则作废；<a class="toLink" :href="viewQuanUrl">点击查看我的霸王券详情</a></p>
            <h4>5. 遇到了其他问题怎么办？</h4>
            <p>详询车享家客服热线：4008-020-6666</p>
            <h4>6. 页面“市场价”的解释（例如市场价：120）：页面展示的价格为车享家线下门店门市价（套餐或套餐卡商品价格为套餐包含项目门店价总和），由于地区、时间的差异和市场波动，价格有可能会和您购物时展示的价格不一致，该价格仅供参考，谢谢！</h4>
            <h4>7. 车享家在法律规定的范围内拥有本次活动最终解释权。</h4>
          </div>
    </div>
  </div>
   </div>

</template>

<script>
  import common from "../../../assets/js/common.js";
  import {Toast} from 'mint-ui';
  export default{
  	data () {
  		return {
        shareInfoUrl:common.isdev() + "/bwcactive/getPrizeCount/FREELUNCH.htm",
  			listQuanUrl: common.isdev() + '/bwcactive/getLoseCouponList.htm',
        getPrizeUrl: common.isdev() + '/bwcactive/getCoupon.htm',
        isLoginUrl: common.isdev() + '/bwcactive/checkLogin.htm',
        buyUrl:  common.isdev() + '/bwcorder/createOrder.htm',
        orderListUrl: common.isEnv("//member") + '/m/order/mallOrder.htm',
        listQuan: [
        {skuCode:'',code:'',Des:'<span class="des">到店仅需<i class="price p38"></i></span><h2 class="txt">享车内空气净化1次</h2>', priceTips:'<span class="oldP">市场价<i>¥160</i></span><span class="nowP">购霸王餐直抵<i>¥122</i></span>'},
        {skuCode:'',code:'',Des:'<span class="des">到店仅需<i class="price p58"></i></span><h2 class="txt">享机器打蜡1次</h2>', priceTips:'<span class="oldP">市场价<i>¥120</i></span><span class="nowP">购霸王餐直抵<i>¥62</i></span>'},
        {skuCode:'',code:'',Des:'<span class="des">价值<i class="price p68"></i></span><h2 class="txt">空调抗菌除味剂1瓶</h2>', priceTips:'<span class="sm">到车享家门店完成任意服务后即可免费兑换</span>'},
        {skuCode:'',code:'',Des:'<span class="des">到店仅需<i class="price p498"></i></span><h2 class="txt">半合成保养养护套餐4L</h2>', priceTips:'<span class="oldP">市场价<i>¥1077</i></span><span class="nowP">购霸王餐直抵<i>¥579</i></span>'},
        {skuCode:'',code:'',Des:'<span class="des t">价值<i class="price p88"></i></span><span class="txt">美容抵用券</span>', priceTips:'<span class="sm">可用于车享家美容类服务（除打蜡、洗车）</span>'}],
        prize:{},
        viewQuanUrl:common.isEnv("//member") +'/m/coupon.htm',
        downloadUrl:'//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0525_bwc',
        isLogin:false,
        isShowRule:false,
        initSignUrl: process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
        prizeCount:1,
        openId: common.getCookie('wemall_openid_c'),
        opentype: common.getCookie('wemall_opentype_c'),
        isShare:false, //是否显示分享弹层
        shareObj:{},
        prizeImgUrl:'',
  		}
  	},
    mounted(){
      var _this = this;
      _this.checkLogin(function(){
        //分享人数
         _this.getShareInfo();
         //中奖信息
         _this.getPrizeInfo();
         //券列表
         _this.getQuanList();
      });

    },
  	methods: {
      //检测是否登录
      checkLogin:function( fn ){
        this.$http.get(this.isLoginUrl).then((d)=>{
          var result = d.body.result, loginUrl = d.body.msg;
          if(result == '0' ){
            window.location.href = loginUrl;
          }else{
            this.isLogin = true;
            console.log("isLogin:", this.isLogin)
            fn();
          }
        },(err)=>{
          Toast("网络异常");
        });
      },
      //调出分享的人数
      getShareInfo(){
        this.$http.get(this.shareInfoUrl).then(function(d) {
          var result = d.data.result;
          if(result===1){
            var prizeCount = d.data.msg;
            console.log("prizeCount:" + prizeCount);
            this.shareObj = {
              friend:{
                shareTitle:"幸福来的太突然，我竟然抽中了免费霸王餐，你也来试试吧！",
                descContent:"无门槛参加抽奖，已有" + prizeCount + "人抽中霸王餐",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bwcshare.jpg?v=1",
                lineLink:window.location.protocol + "//" + window.location.host + "/bwcactive/toHomePage.htm"
              },
              friendQuan:{
                shareTitle:"幸福来的太突然，我竟然抽中了免费霸王餐，你也来试试吧！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bwcshare.jpg?v=1",
                lineLink:window.location.protocol + "//" + window.location.host + "/bwcactive/toHomePage.htm"
              }
            }
            if(this.opentype !=6){
              //初始化微信配置
              common.initWxShare(this, this.initSignUrl, this.shareObj, 2);
            }
          }
        })
      },
      //得到用户中奖信息
      getPrizeInfo(){
        this.$http.get(this.getPrizeUrl).then(res => {
          //0 未登录，报错
          if(res.body.result === 1){

            if(res.body.obj !=null ){
              console.log("中奖信息："+res.body.obj.couponDesc)
              this.prize = res.body.obj;
              this.prizeImgUrl = res.body.obj.imgUrl;
            }

          }else{
            console.log('没有获取到用户中奖信息')
          }
        },(err)=>{

          Toast('网络异常，没有获取到用户中奖信息');
          console.log('网络异常，没有获取到用户中奖信息')
        });
      },
      //获取券列表
      getQuanList(){
        var _this = this;
        _this.$http.get(_this.listQuanUrl).then(res => {
          var quanInfo = res.body.obj, res = res.body.result;
          if(res === 1){

            for(var i=0; i<quanInfo.length; i++){

              _this.listQuan[i].code = quanInfo[i].code;
              _this.listQuan[i].status = quanInfo[i].status;
              //打点用
              _this.listQuan[i].skuCode = quanInfo[i].skuCode;
            }
          }


        },(err)=>{
          //debugger;

          Toast('网络异常，没有获取到券列表');
          console.log('网络异常，没有获取到券列表');

        });
      },
      //活动规则开关
      popRules(){
        this.isShowRule = !this.isShowRule;
      },
      //分享
      wxShare(){
      	if(this.isLogin){
          //登录状态才能分享
          var _this = this;
          console.log("可以分享了");
          console.log(_this.shareObj.friend.descContent);
          if( _this.opentype == 6) {
            console.log("APP调lb分享");
            lb.shareInfo({
                title : _this.shareObj.friend.descContent,
                url : _this.shareObj.friend.lineLink,
                content : _this.shareObj.friend.shareTitle,
                imgUrl : _this.shareObj.friend.imgUrl
            } ,function (data) {
            	  if(data.errorCode == 0){
                  common.shareSucess(_this, 2);
                }else{
                  Toast("分享失败");
                }
            })
          }
         else {
         	_this.isShare = true;
        }
         // this.shareGuide();
        }else {console.log("未登录不能分享");Toast('未登录不能分享')}
      },
      hideShare(){
      	//隐藏分享弹层
        this.isShare = false;
      },


      //获取订单链接
      getOrderUrl: function (url, code){
        //判断微信渠道，如果openid没有，购买就跳下载app
        if( this.opentype == 7 || this.opentype == 12){
           if(this.openId==''){
             window.location.href = this.downloadUrl;
             return;
           }
        }
        console.log("orderUrl code:", code);
        this.$http.get(url+'?code='+code).then(res => {
          var data = res.body,result = data.result,msg = data.msg;
          if(result === 1){
            //订单创建成功
            console.log("订单创建成功")
            var orderUrl = res.body.msg;
            location.href = orderUrl;

          }else{
           //订单创建失败
           Toast(msg)
           console.log("订单创建失败")
          }

        },function(err){
          console.log('没有获取到订单Url：'+ err.status)
        });

      },


    }
  }

 </script>

 <style lang="scss" scope>
$breakpoints: (
  'xs': 'only screen and ( max-width: 320px)',
) !default;

 @mixin respond-to($breakpoint) {
  $query: map-get($breakpoints, $breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
    @content;
  }
}
  @import '../../../assets/css/common.scss';
	@function rem($px){
	  @return $px / 100 * 1rem;
	}
  body{
    max-width:2248px;background:#3bafff url(../../../assets/image/dineAndDash/foot_icon.png) left bottom no-repeat;background-size:100%;font-size:rem(90);}
  img{max-width:100%;}
  .toLink{color:#B30F32;text-decoration:underline;}
  .shadow{position:fixed;width:100%;height:100%;top:0;left:0;z-index:8;background:rgba(0,0,0,.8)}
  .shareGuide{background:rgba(0,0,0,.8) url("../../../assets/image/dineAndDash/sharebtn.png") center bottom no-repeat;background-size:cover;width:100%;height:100%;position:fixed;top:0;left:0;z-index:20;}
.app-page{
  padding-bottom:10%;
  .topbanner{width:100%;height:rem(2658);background:url(../../../assets/image/dineAndDash/top.jpg) no-repeat;background-size:100%;padding:rem(720) rem(400);text-align:center;
    .simg{margin-bottom:rem(240);height:7rem;}
    a{display:block;}
    .toQuan{width:rem(400);height:rem(120);color:#fff;cursor:pointer;margin:0 auto;}
    .shareBtn{margin:rem(380) auto 0;width:rem(1087);height:rem(277);background:url(../../../assets/image/dineAndDash/xuanyaobtn.png) no-repeat;background-size:100%;}
  }
  .quanSucTips{background:url(../../../assets/image/dineAndDash/diwen.jpg) no-repeat;background-size:100%;height:rem(1821)
    .sucImg{position:relative;top:rem(-250);padding:0 3%;}
    .quanWrap{
      position:relative;margin:rem(250) 5% rem(250);
      .simgTop{position:absolute;top:rem(-330);left:rem(-20);z-index:2;width:105%;height:rem(686);background:url(../../../assets/image/dineAndDash/guoto.png) left top no-repeat;background-size:100%;}
      .simgBottom{width:rem(1072);height:rem(399);position:absolute;bottom:rem(-120);left:50%;z-index:3;background:url(../../../assets/image/dineAndDash/guodi.png) no-repeat;background-size:100%;margin-left:rem(-536)}
      .quan-wrap{border: 0.44rem solid #ffd924;box-shadow: 0.02rem 0.03rem 0.49rem rgba(15, 5, 4, 0.75);background: #077bd4;position: relative;margin-bottom: 1rem;
        .quan-wrapBg{box-shadow:0 0 rem(250) rgba(255,255,255,.39), inset 0 0 rem(57) rgba(4,0,0,.34);z-index:1;padding:rem(300) rem(10) rem(220);
          .quanListWrap li{background:url(../../../assets/image/dineAndDash/quan_bg.png) no-repeat;background-size:100% 100%;padding:rem(75) rem(135) rem(120);display:-webkit-box;-webkit-box-pack:center;display:flex;
            .quanList-l{width:75%;margin-right:rem(30);border:rem(15) solid #000;border-radius:rem(150) 0 0 rem(150);text-align:center;
              .quan-status{padding:rem(10) 0;color:$_fff;background:#0046ba;display:block;border-radius:rem(150) 0 0 0;}
              .quan-status.gray{background:#5d5d5d;color:$_fff;}
              .quanData{background:$_fff;padding:rem(10) 0 rem(15);border:rem(15) solid #000;border-left:none;border-right:none;min-height:3.5rem;
                .t{margin-top:.9rem;display:inline-block;}
                .price-tips i{font-size:rem(90)}
                .des{font-size:rem(80)}
                .price{font-size:rem(120);display:inline-block;vertical-align:middle;}
                .txt{font-size:rem(100)}
                .p498{background:url(../../../assets/image/dineAndDash/498.png) no-repeat;width:rem(401.96);height:rem(166.9);background-size: 100% 100%;}
                .p88{background:url(../../../assets/image/dineAndDash/88.png) no-repeat;width:rem(306);height:rem(160);background-size: 100% 100%;}
                .p68{background:url(../../../assets/image/dineAndDash/68.png) no-repeat;width:rem(306);height:rem(160);background-size: 100% 100%;}
                .p58{background:url(../../../assets/image/dineAndDash/58.png) no-repeat;width:rem(306);height:rem(160);background-size: 100% 100%;}
                .p38{background:url(../../../assets/image/dineAndDash/38.png) no-repeat;width:rem(360);height:rem(160);background-size: 100% 100%;}
              }
              .price-tips{background:#c9ecff;border-radius:0 0 0 rem(150);font-size:rem(70);padding:rem(30) 0;white-space:nowrap;
                .oldP{position:relative;}
                .oldP:after{position:absolute;content:"";left:0;top:rem(25);width:100%;border:1px solid #f4ee7d;transform:rotate(5deg);}
                .nowP{color:#053ccd;margin-left:rem(50);font-weight:bold;}
                .sm{font-size:rem(85);display:block;-webkit-transform: scale(0.65);margin-left:rem(-150)}
              }
            }
            .quanList-r{width:rem(340);border:rem(15) solid #000;border-radius: 0 rem(150) rem(150) 0;text-align:center;background:#0046ba;position:relative;padding-top:rem(50);
              .sprice{color:#ffd838;font-size:rem(90)}
              h4{color:$_fff;font-size:rem(120);margin-top:rem(30)}
            }
            .quanList-r:after{position:absolute;content:"";width:0;height:0;border-left:rem(100) solid transparent;border-bottom:rem(40) solid #ffd838; border-right:rem(100) solid transparent;bottom:rem(50);left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);
              @include respond-to(xs) {
                  bottom:rem(-40);
                }
              }
            .quanList-r.gray{background:#5d5d5d;
              .sprice{color:#9b9b9b}
              h4{color:$_fff;}
            }
            .quanList-r.gray:after{border-bottom-color:#9b9b9b;}
          }
        }
      }

    }
  }
  .activeInfo{color:#071235;text-decoration:underline;width:rem(414);display:block;margin:0 auto;position:relative;top:rem(-150)}
  .downloadApp{width:100%;height:rem(337);background:rgba(0,0,0,.8) url(../../../assets/image/dineAndDash/download_icon.png) rem(217) rem(45) no-repeat;background-size:auto 80%;position:fixed;bottom:0;left:0;z-index:5;}
  .downloadApp .toApp{position:absolute;top:50%;right:rem(210);transform:translateY(-50%);-webkit-transform:translateY(-50%);color:$_fff;border:rem(10) solid $_fff;padding:rem(20) rem(50)}

  .activeInfo{color:#071235;text-decoration:underline;width:rem(414);display:block;margin:0 auto;}

  .ruleMain{
    position:fixed;top:50%;width:95%;margin: 0 2.5%;background:#077bd4;border: 0.44rem solid #ffd924;box-shadow:inset 0.02rem 0.03rem 0.49rem rgba(15, 5, 4, 0.75);z-index:9;transform:translateY(-50%);-webkit-transform:translateY(-50%);padding:rem(180) 0 rem(100);
    .rule-close{width:rem(110);height:rem(110);background:transparent url("../../../assets/image/dineAndDash/pop-close.png") no-repeat bottom left;background-size:100% 100%;position:absolute;top:rem(80);right:rem(120);}
    h3{color:#fff;font-size:rem(180);text-align:center;}
    .rule-content{padding:rem(100) rem(90);max-height:rem(2700);overflow:auto;-webkit-overflow-scrolling:touch;
      h4{color:#003BA6;font-weight:bold;}
      p{color:$_fff;font-size:rem(80);line-height:1.8;margin:rem(30) 0}
    }

  }

}
 </style>


